window.addEventListener('load', function () {
    var preview_img = document.querySelector('.preview_img')
    var mask = document.querySelector('.mask');
    var big = this.document.querySelector('.big');
    // 1．当鼠标经过preview_img就显示和隐藏mask遮挡层和big大盒子
    preview_img.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    //2.让遮盖层跟着鼠标移动
    preview_img.addEventListener('mousemove', function (e) {
        // 1．先计算出鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        //盒子需要往上移动高度的一半，往左移动宽度的一半，鼠标才可以在最中央
        //求出鼠标在中间的位置
        var maskX = x - mask.offsetWidth / 2
        var maskY = y - mask.offsetHeight / 2
        //遮盖层不可以超出图片框
        //如果x坐标小于0，让遮盖层的left=0
        //求出遮挡层最大移动距离
        var maskXMax = preview_img.offsetWidth - mask.offsetWidth;
        var maskYMax = preview_img.offsetHeight - mask.offsetHeight
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskXMax) {
            maskX = maskXMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskYMax) {
            maskY = maskYMax
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        //获取大图片
        var bigIMg = document.querySelector('.bigImg')
        //大图片和小图片要按照比例移动
        //大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离
        //求出大图片最大移动距离
        var bigxMAX = bigIMg.offsetWidth - big.offsetWidth;
        var bigyMAX = bigIMg.offsetHeight - big.offsetHeight;
        //大图片移动距离
        var bigX = maskX * bigxMAX / maskXMax
        var bigY = maskY * bigyMAX / maskYMax
        bigIMg.style.left = -bigX + 'px';
        bigIMg.style.top = -bigY + 'px';
    })
})